import React, {Component} from 'react';
import MyHeader from "../MyUIComponent/MyHeader";
import {axiosGetFunction} from "../MyConfig/AppConfig";
import { List } from "antd";

class AllImgComponent extends Component {
    state = {
        img_component_list: []
    }

    componentDidMount() {
        console.log("MyImgComponent: componentDidMount")
        axiosGetFunction(
            "/img_component/all",
            (received_data)=>{
                console.log("received_data", received_data)
                this.setState({
                    img_component_list: received_data.dataList
                })
            }
        )
    }

    render() {
        let { img_component_list } = this.state;
        return (
            <div>
                <MyHeader pathname="all_img_component"/>
                <div style={{ padding: 20 }}>
                    <h2>全部组态组件</h2>
                    <List
                        itemLayout="vertical"
                        pagination={{
                            onChange: page => {
                                console.log(page);
                            },
                        }}
                        dataSource={img_component_list}
                        renderItem={(item)=>(
                            <List.Item
                                key={item.title}
                                extra={
                                    <img
                                        width={140}
                                        alt="logo"
                                        src={item.img_url}
                                    />
                                }
                            >
                                【ID】{item.img_component_id}【组名】{item.group_name}【标题】{item.title}【文本】{item.text_str}
                            </List.Item>)
                        }
                    />
                </div>
            </div>
        );
    }
}

export default AllImgComponent;
